<template>
  <div>
    <div :style="{  minHeight: '360px' }">
      <!--            <line-chart v-bind="config"/>-->

      <a-card>
        <a-card-grid style="width:25%;text-align:center;">
          <div :style="{height: '120px'}">
            <a-row :gutter="16">
              <a-col :span="12">
                <a-statistic title="住院人数" :value="num"/>
              </a-col>
              <a-col :span="12">
                <a-statistic title="危重病人" :value="icuNum" :value-style="{ color: '#f18c22' }"/>
              </a-col>
            </a-row>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-statistic title="轻症病人" :value="lowNum" :value-style="{ color: '#2290f1' }"/>
              </a-col>
              <a-col :span="12">
                <a-statistic title="极危重病人" :value="supNum" :value-style="{ color: '#cf1322' }"/>
              </a-col>
            </a-row>
          </div>
        </a-card-grid>
        <a-card-grid style="width:25%;text-align:center" :hoverable="false">
          <div :style="{height: '120px'}">
            <p>核酸检测</p>
            <a-row :gutter="16">
              <a-col :span="12">
                <a-statistic title="检测完数量" :value="num" :value-style="{ color: '#22f12c' }"/>
              </a-col>
              <a-col :span="12">
                <a-statistic title="待检测数量" :value="icuNum" :value-style="{ color: '#f18c22' }"/>
              </a-col>
            </a-row>
          </div>
        </a-card-grid>
        <a-card-grid style="width:25%;text-align:center">
          <div :style="{height: '120px'}">
            <p>普通病房</p>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-statistic title="检测完数量" :value="num" :value-style="{ color: '#22f12c' }"/>
              </a-col>
              <a-col :span="12">
                <a-statistic title="待检测数量" :value="icuNum" :value-style="{ color: '#f18c22' }"/>
              </a-col>
            </a-row>
            <a-tooltip title="3 done / 3 in progress / 4 to do">
              <a-progress :percent="60" :success-percent="30"/>
            </a-tooltip>
          </div>
        </a-card-grid>
        <a-card-grid style="width:25%;text-align:center">
          <div :style="{height: '120px'}">
            <p>设备在线数量</p>

            <a-row :gutter="16">
              <a-col :span="12">
                <a-statistic title="在线数量" :value="num" :value-style="{ color: '#22f12c' }"/>
              </a-col>
              <a-col :span="12">
                <a-statistic title="离线数量" :value="icuNum" :value-style="{ color: '#f18c22' }"/>
              </a-col>
            </a-row>

          </div>
        </a-card-grid>
      </a-card>
      <div :style="{width:'100%',height:'100%',background: '#fff',marginTop:'20px'}">
        <a-empty
            image="https://gw.alipayobjects.com/mdn/miniapp_social/afts/img/A*pevERLJC9v0AAAAAAAAAAABjAQAAAQ/original"
            :image-style="{height: '160px'}" :style="{height:'400px'}" v-show="true">
          <template #description>
            <span> 没有监控对象</span>
          </template>
          <a-button type="primary" @click="showModal">
            现在创建
          </a-button>

        </a-empty>

        <div>

          <div>

            <a-modal title="设置对象" v-model:visible="visible" :confirm-loading="confirmLoading" width="1000px"
                     ok-text="确认" cancel-text="取消" @ok="handleOk">

              <div :style="{margin:'10px'}">
                <a-input-search v-model:value="value" placeholder="输入关键字" enter-button @search="onSearch"/>
              </div>
              <div :style="{height:'600px',overflow:'auto'}">
                <a-list class="demo-loadmore-list" :loading="loading" item-layout="horizontal"
                        :data-source="data">
                  <template #loadMore>
                    <div v-if="showLoadingMore"
                         :style="{ textAlign: 'center', marginTop: '12px', height: '32px', lineHeight: '32px' }">
                      <a-spin v-if="loadingMore"/>
                      <a-button v-else @click="onLoadMore">
                        加载更多
                      </a-button>
                    </div>
                  </template>
                  <template #renderItem="{ item, }">
                    <a-list-item>
                      <template #actions>
                        <a-button type="primary">
                          添加
                        </a-button>
                      </template>
                      <a-list-item-meta description="is refined by Ant UED Team">
                        <template #title>
                          <a href="https://www.antdv.com/">{{ item.name.last }}</a>
                        </template>
                        <template #avatar>
                          <a-avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>
                        </template>
                      </a-list-item-meta>
                      <div>content</div>
                    </a-list-item>
                  </template>
                </a-list>

              </div>

            </a-modal>
          </div>


        </div>
      </div>


    </div>

  </div>
</template>

<script>
import reqwest from "reqwest";

const fakeDataUrl = 'https://randomuser.me/api/?results=5&inc=name,gender,email,nat&noinfo';

export default {
  name: "Survey",
  setup() {


  },
  data() {
    return {
      value: '',
      loading: true,
      loadingMore: false,
      showLoadingMore: true,
      data: [],
      num: 56,
      icuNum: 23,
      lowNum: 33,
      supNum: 0,
      str: '123',
      visible: false,
      confirmLoading: false,


      config: {
        height: 350,
        autoFit: true,
        xField: 'year',
        yField: 'value',
        smooth: true,
        meta: {
          value: {
            max: 15,
          },
        },
        data: [
          {year: '1991', value: 3},
          {year: '1992', value: 4},
          {year: '1993', value: 3.5},
          {year: '1994', value: 5},
          {year: '1995', value: 4.9},
          {year: '1996', value: 6},
          {year: '1997', value: 7},
          {year: '1998', value: 9},
          {year: '1999', value: 11},
        ],
      },
    }
  }, mounted() {
    this.getData(res => {
      this.loading = false;
      this.data = res.results;
    });
  }, methods: {
    onSearch(searchValue) {
      console.log('use value', searchValue);
    },
    showModal() {
      this.visible = true;
    },
    handleOk() {

      this.confirmLoading = true;
      setTimeout(() => {
        this.visible = false;
        this.confirmLoading = false;
      }, 1000);
    },

    getData(callback) {
      reqwest({
        url: fakeDataUrl,
        type: 'json',
        method: 'get',
        contentType: 'application/json',
        success: res => {
          callback(res);
        },
      });
    },
    onLoadMore() {
      this.loadingMore = true;
      this.getData(res => {
        this.data = this.data.concat(res.results);
        this.loadingMore = false;
        this.$nextTick(() => {
          window.dispatchEvent(new Event('resize'));
        });
      });
    }
  }
}
</script>

<style scoped>

</style>